<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
  <title>maptalks - {{ title }}</title>
  <link rel="stylesheet" href="{{ site.baseurl }}/{{ webpack.assets.[main.css] }}" />
  <link rel="stylesheet" href="{{ site.baseurl }}/code-prettify/prettify.css" />
  <script type="text/javascript" src="{{ site.baseurl }}/code-prettify/prettify.js"></script>
  <script type="text/javascript" src="{{ site.baseurl }}/lib/clipboard.min.js"></script>
</head>

<body>

  <div class="demo-viewer">

    <div class="sidebar">

      <div class="logo-area">
          <a href="http://maptalks.org/" title="maptalks.org" class="logo">
          </a>
          <div class="lang-switch">
            {{#ifCond locale 'en'}}
              <div class="lang-option"><a href="{{ @root.site.baseurl }}/cn/{{ path }}">中文</a></div>
            {{else}}
              <div class="lang-option"><a href="{{ @root.site.baseurl }}/en/{{ path }}">EN</a></div>
            {{/ifCond}}
          </div>
      </div>

      <div class="menu-button"></div>

      <div class="menu-area">

        <div class="action-bar">
          <div class="search-bar">
            <input type="text" class="search-field" id="example-search-input">
            <div class="search-button" id="example-search-button"></div>
          </div>
          <div class="all-download-button"><a href="https://github.com/maptalks/examples/archive/gh-pages.zip">{{ t 'Download All' }}</a></div>
        </div>

        <ul class="menu scroll-block">
          {{#each examples}}
          <li class="list-tile">
            <div class="list-title">{{index}} {{category}}</div>
            <ul class="list">
              {{#each examples}}
                <li class="list-tile example on">
                {{#if mark}}
                <a style="color:red"
                {{^}}
                <a
                {{/if}}
                {{#if url}}
                  id="{{../name}}_{{name}}" href="{{url}}" target="_blank">{{../index}}.{{index}} {{title}} <img title="external link" src="../../../resource/image/external-url.png"/></a>
                {{^}}
                  class="{{mark}}" id="{{../name}}_{{name}}" href="{{ @root.site.baseurl }}/{{ @root.locale }}/{{../name}}/{{name}}/#{{../name}}_{{name}}">{{../index}}.{{index}} {{title}}</a>
                {{/if}}
              </li>
              {{/each}}
            </ul>
          </li>
          {{/each}}
        </ul>

      </div>

    </div>

    <div class="demo-panel">

      <div class="title-area">
        <div class="title">{{ title }}</div>
        <div class="action-area">
          <a class="action-link" href="https://github.com/maptalks/examples/tree/master/src/{{ path }}" target="_blank">
            <div class="action-button button">
              <i class="icon source"></i>{{ t "action.source" }}
            </div>
          </a>
          <a class="action-link" href="raw/{{ basename }}" target="_blank">
            <div class="action-button button">
              <i class="icon open"></i>{{ t "action.open" }}
            </div>
          </a>
          <a class="action-link" href="javascript:edit();">
            <div class="action-button button">
              <i class="icon edit"></i>{{ t "action.edit" }}
            </div>
          </a>
          <a class="action-link" href="javascript:;" id="action-link-copy" data-clipboard-target="#source">
            <div class="action-button button">
              <i class="icon copy"></i>{{ t "action.copy" }}
            </div>
          </a>
        </div>
      </div>

      <div class="content-area scroll-block">

        <div class="map-viewer">
          <iframe class="map-view" sandbox="allow-modals allow-popups allow-scripts allow-forms allow-same-origin" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="raw/{{ basename }}"></iframe>
        </div>

        <div class="readme md">
        {{#if readme.contents}}
          <br>
          {{{ readme.contents }}}
        {{/if}}
        </div>

        <div class="code-viewer">
          <div class="code-snippet html">
            <div class="code-title">{{ basename }}</div>
            <pre id="source" class="prettyprint">{{#escape}}{{> example}}{{/escape}}</pre>
          </div>
        </div>

      </div>

    </div>

  </div>

  <div style="display:none;">
    <textarea id="html-data" name="html">
{{#prettify mode="html"}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js"></script>
{{{ contents }}}
{{/prettify}}</textarea>
    <textarea id="js-data" name="js">
{{#prettify mode="js"}}
{{{ js.source }}}
{{/prettify}}</textarea>
    <textarea id="css-data" name="css">
{{#prettify mode="css"}}
{{{ css.source }}}
{{/prettify}}</textarea>
    <form method="post" action="https://codepen.io/pen/define" id="editor" target="_blanks">
      <input type="hidden" id="editor-data" name="data" value=""></input>
    </form>
  </div>

  <div style="display:none;">
    <span id="text-message-copied">{{ t 'message.copied' }}</span>
  </div>

  <script>window.SEARCH_INDEX = {{{ lunrIndex examples }}}</script>
  <script type="text/javascript" src="{{ site.baseurl }}/lib/lunr-chinese.min.js"></script>
  <script type="text/javascript" src="{{ site.baseurl }}/{{ webpack.assets.[main.js] }}"></script>

  <script>
    PR.prettyPrint();

    function edit() {
      var htmlDataNode = document.getElementById('html-data');
      var htmlData = htmlDataNode.innerText;
      var jsDataNode = document.getElementById('js-data');
      var jsData = jsDataNode.innerText;
      var cssDataNode = document.getElementById('css-data');
      var cssData = cssDataNode.innerText;
      var data = {
        title: "{{{ title }}}",
        description: "{{{ category }}} - {{{ title }}}",
      };
      data.html = htmlData;
      data.js = jsData;
      data.css = cssData;
      var dataNode = document.getElementById('editor-data');
      dataNode.value = JSON.stringify(data);
      document.getElementById('editor').submit();
    }
  </script>
  <script>
    (function (i, s, o, g, r, a, m) {
      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
          (i[r].q = i[r].q || []).push(arguments)
      }, i[r].l = 1 * new Date(); a = s.createElement(o),
          m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-103005498-1', 'auto');
    ga('send', 'pageview');
  </script>
</body>

</html>
